import React, { Component } from 'react';
import style from './swiperDialog.module.scss';
import {bindActionCreators} from 'redux';
import * as imgActions from '@/store/actions/img';
import {connect} from 'react-redux';
import SwiperCore, { Lazy } from 'swiper';
import {Swiper,SwiperSlide} from 'swiper/react';
import 'swiper/swiper.scss';
import 'swiper/components/pagination/pagination.scss';
SwiperCore.use([Lazy]);

class SwiperDialog extends Component {
    render() {
        let {categoryList,activeIndex} = this.props;
        return (
            <div className={style.dialog} onClick={this.props.changeDialog.bind(this,false)}>
                <Swiper
                    spaceBetween={50}
                    onSlideChange={(swiper) => {
                        if(swiper.activeIndex >= this.props.categoryList.length-1 && swiper.activeIndex > 2){
                            this.props.getData();
                        }
                    }}
                    initialSlide={activeIndex}
                    lazy={true}
                >
                    {
                        categoryList.length && categoryList.map((item,index) => <SwiperSlide key={index}>
                            <img className={`swiper-lazy ${style.img}`} data-src={item.Url.replace('{0}','3')} alt=""/>
                            <div className="swiper-lazy-preloader">
                                <img src={require('../../../static/bg.png')} alt="" style={{width:'50px'}}/>
                            </div>
                        </SwiperSlide>)
                    }
                </Swiper>
            </div>
        )
    }
}

const stateMapToProps = (state) => {
    return {
        categoryList:state.img.categoryList,
        activeIndex:state.img.activeIndex,
        Count:state.img.Count
    }
}

const dispatchMapToProps = (dispatch) => {
    return bindActionCreators(imgActions,dispatch);
}

export default connect(stateMapToProps,dispatchMapToProps)(SwiperDialog)